<template>
  <div  style="width: 100%;height: calc(100vh - 84px)">
    <top-controller @change="changeTop" />
    <el-tabs v-model="selectTab" type="card" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.p" v-for="item in dataList"></el-tab-pane>
    </el-tabs>
    <div class="dataBox" >
      <echartsItem  :list="showPlane.data" :color="showPlane.color" :name="showPlane.name"/>
    </div>
  </div>
</template>
<script>
import {list} from  "@/api/IOT/index"
import echartsItem from "./components/echartsItem.vue"
import TopController from "./components/TopController.vue";
export default {
  components:{
    echartsItem,
    TopController
  },
  watch:{
    switchV(val){
      // console.log("改变")
      if (val){

      }else {

        this.$message({
          message:"关闭实时数据",
          type:"success"
        })
      }
    }
  },
  name: "Druid",
  data() {
    return {
      switchV:false,
      timer:null,
      selectTab:"h_str",
      showPlane:{},
      pageSize:10,
      isReal:true,
      dataList:[
        {
        name:"湿度值",
        p:"h_str",
        data:[],
        color:"#ff0"
      },
        {
          name:"温度值",
          p:"t_str",
          data:[],
          color:"#ff0"

        },
        {
          name:"光照值",
          p:"l_str",
          data:[],
          color:"#ff0"

        },
        {
          name:"烟雾值",
          p:"s",
          data:[],
          color:"#ff0"

        },
        {
          name:"火焰值",
          p:"f",
          data:[],
          color:"#ff0"

        },
        {
          name:"烟雾阈值",
          p:"S_S",
          data:[],
          color:"#ff0"

        },
        {
          name:"温度阈值",
          p:"T_T",
          data:[],
          color:"#ff0"

        },
      ]
    };
  },
  mounted() {
    this.getData()
    this.showPlane = this.dataList[0]
  },
  methods:{
    startTimer(){
      this.getData()
      this.$message({
        message:"开启实时数据",
        type:"success"
      })
      this.timer = setInterval(()=>{
        this.getData()
      },1000 * 3)
    },
    stopTimer(){
      clearInterval(this.timer)
    },
    changeTop(val){
      if(val>0){
        this.stopTimer()
        this.pageSize = val
        this.getData()
      }else {
        this.startTimer()
        this.pageSize = 20
      }
    },
    handleClick({index}){
      index = Number(index)
      this.showPlane = this.dataList[index]
    },
    async getData(){
      let q = []
      this.dataList.map(item=>{
       q.push( list({
         p:item.p,
         page:1,
         pageSize:this.pageSize
       }))
      })
      await Promise.all(q).then(res=>{
        // console.log(res)
        res.map((item,index)=>{
          this.dataList[index].data = item.data
        })
      })
    }
  }
};
</script>
<style scoped lang="scss">
  .dataBox {
    width: 100%;
    height: 500px;
    //background: red;
    .item {
      height: 300px;
      border: 1px solid #333;
    }
  }
.switch {
  display: flex;
  margin-left: 20px;
  margin-top: 20px;
}
</style>
